<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
	border:1px solid black;
	margin:0
	}
td {
	font-size:10px;
	font-family:Verdana;
	padding-left:5px;
	}
#tag {
	font-size:13px;
	font-family:Arial Black;
	}
#tagtree {
	position:absolute;
	width:100%;
	overflow:hidden;
	}
#iTable	{
	table-layout:fixed
	}
#iTable .td1	{
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	}
#iTable .td2	{
	border-bottom:1px solid #CCCCCC;
	}
input.textfield {
	width:100%;
	border:0px;
	margin:-1;
	padding:0;
	font-size:10px;
	font-family:Verdana;
	}
select {
	width:100%;
	border:0px;
	margin:-2;
	padding:0;
	font-size:10px;
	font-family:Verdana;
	}
.tagselector {
	cursor:hand;
	font-size:9px;
	font-family:Arial;
	color:#0000FF;
	}
.tagselectorhover {
	cursor:hand;
	font-size:9px;
	font-family:Arial;
	color:#FF0000;
	}
</style>
<script>
	document.onselectstart	= function(){return false;}
	document.onmousedown	= down;
	document.onmouseup		= up;
	document.onmousemove	= move;

	var _jEditor;
	var _drag				= false;
	var _dx,_dy;
	var _sync				= true;
	var scrollInterval;
	var activeTag			= null;
	var selectedTag			= null;
	var curTag				= null;

	var _events				= [
								['onmouseover'	, 'text'],
								['onmouseout'	, 'text'],
								['onmousedown'	, 'text'],
								['onmouseup'	, 'text'],
								['onclick'		, 'text'],
								['onkeydown'	, 'text'],
								['onkeyup'		, 'text'],
								['onkeypress'	, 'text']
							  ]
	var _commons			= [
								['name'			, 'text'],
								['id'			, 'text'],
								['style'		, 'text'],
								['class'		, 'text'],
								['title'		, 'text']	
							  ]
	var _tags				= {};
	_tags.A					= [
								['href'			, 'text'],
								['target'		, 'text'],
								['onfocus'		, 'text'],
								['onblur'		, 'text']
							  ]
	_tags.BODY				= [
								['scroll'		, 'select','yes|no|auto'],
								['leftMargin'	, 'number'],
								['topMargin'	, 'number'],
								['bgColor'		, 'color'],
								['background'	, 'text'],
								['onfocus'		, 'text'],
								['onblur'		, 'text'],
								['onload'		, 'text']
							  ]
	_tags.DIV				= [
								['align'		, 'select','left|right|center'],
								['noWrap'		, 'boolean']
							  ]
	_tags.IMG				= [
								['align'		, 'select','left|right|baseline|top|middle|bottom|texttop|absmiddle|absbottom'],
								['width'		, 'number'],
								['height'		, 'number'],
								['vspace'		, 'number'],
								['hspace'		, 'number']
							  ]
	_tags.INPUT				= [
								['type'			, 'select','submit|reset|button|hidden|text|password|file|image|radio|checkbox'],
								['value'		, 'text']
							  ]
	_tags.TD				= [
								['width'		, 'text'],
								['height'		, 'text'],
								['align'		, 'select','left|right|center'],
								['valign'		, 'select','top|middle|bottom|baseline'],
								['bgColor'		, 'color']
							  ]
	_tags.TABLE				= [
								['width'		, 'text'],
								['height'		, 'text'],
								['cellSpacing'	, 'number'],
								['cellPadding'	, 'number'],
								['border'		, 'number'],
								['borderColor'	, 'color'],
								['align'		, 'select','left|right|center'],
								['bgColor'		, 'color'],
								['background'	, 'text']
							  ]
	_tags.FONT				= [
								['color'		, 'color']
							  ]
	_tags.FORM				= [
								['action'		, 'text'],
								['method'		, 'text'],
								['target'		, 'text'],
								['enctype'		, 'text']
							  ]
	_tags.HR				= [
								['color'		, 'text'],
								['noShade'		, 'boolean'],
								['size'			, 'number']
							  ]

	function resize()
	{
		_jEditor.propertyPanel.style.height	= document.body.scrollWidth;
		_jEditor.propertyPanel.style.height	= document.body.scrollHeight+1;
	}

	function down()
	{
		_drag				= true;

		_dx					= event.screenX-parseInt(_jEditor.propertyPanel.currentStyle.left);
		_dy					= event.screenY-parseInt(_jEditor.propertyPanel.currentStyle.top);
		
		document.body.setCapture();
	}

	function up()
	{
		_drag				= false;
		document.body.releaseCapture();
	}

	function move()
	{
		if(_drag==true)
		{
			_jEditor.propertyPanel.style.left			= event.screenX-_dx;
			_jEditor.propertyPanel.style.top			= event.screenY-_dy;
		}
	}

	function kill()
	{
		_jEditor.showPropertyPanel	= 'hidden';
	}

	function public_syncTag(e)
	{
		if(_sync==true)
		{
			_sync				= false;
			activeTag			= null;
			if(typeof(e)=='undefined')
			{
				tag.innerText	= '<No Tag>';
				return;
			}
			_jEditor			= e;
			if(_jEditor.editControl.Busy==false)
			{
				var curSel			= _jEditor.editControl.DOM.selection;
				var curRng			= curSel.createRange();

				curTag			= _jEditor.offsetToNode();

				selectedTag			= curTag;

				tag.innerText		= '< '+curTag.tagName+' >';

				var tempTag			= curTag;
				var tagtreeCount	= 0;
				var tagtreeStr		= '<span class="tagselector" onclick=getParentTag('+tagtreeCount+') onmouseover="this.className=\'tagselectorhover\'" onmouseout="this.className=\'tagselector\'">&lt;'+tempTag.tagName.toLowerCase()+'&gt;</span>';
				while(tempTag.tagName!='BODY')
				{
					tagtreeCount	++;
					tempTag			= tempTag.parentElement;
					tagtreeStr		= '<span class="tagselector" onclick=getParentTag('+tagtreeCount+') onmouseover="this.className=\'tagselectorhover\'" onmouseout="this.className=\'tagselector\'">&lt;'+tempTag.tagName.toLowerCase()+'&gt;</span>'+tagtreeStr;
				}
				tagtree.innerHTML	= tagtreeStr;
				createTagProperty(curTag);
			}
			resize();
			_sync				= true;
		}
	}
	
	function getParentTag(iCount)
	{
		if(activeTag!=null)
		{
			activeTag.style.color		= 'blue';
		}
		event.srcElement.style.color	= 'red';
		activeTag						= event.srcElement;

		curTag							= selectedTag;
		for(var i=0;i<iCount;i++)
		{
			curTag						= curTag.parentElement;
		}
		/*
		_jEditor.editControl.focus();
		var curRng									= _jEditor.editControl.DOM.body.createTextRange();
		curRng.moveToElementText(tempTag);
		curRng.select();
		_jEditor.editControl.focus();
		*/
		
		tag.innerText		= '< '+curTag.tagName+' >';

		createTagProperty(curTag);
	}

	function createTagProperty(e)
	{
		box.innerHTML	= '';

		var str='<table width=100% border=0 cellspacing=0 id=iTable>';
		if(_tags[e.tagName]!=null)
		{
			for(var i=0;i<_tags[e.tagName].length;i++)
			{
				if(_tags[e.tagName][i][1]=='select')
				{
					str			+= createEachProperty(_tags[e.tagName][i][0],_tags[e.tagName][i][1],_tags[e.tagName][i][2]);
				}
				else
				{
					str			+= createEachProperty(_tags[e.tagName][i][0],_tags[e.tagName][i][1]);
				}
			}
		}
		for(var i=0;i<_commons.length;i++)
		{
			str			+= createEachProperty(_commons[i][0],_commons[i][1])
		}
		for(var i=0;i<_events.length;i++)
		{
			str			+= createEachProperty(_events[i][0],_events[i][1])
		}
		str				+= '</table>';
		box.insertAdjacentHTML('beforeEnd',str)

	}

	function createEachProperty(propName,valueType,propValue)
	{
		var str						= '<tr height=17 onclick="if(iTable.getAttribute(\'curRow\')!=null)iTable.curRow.bgColor=\'\';this.bgColor=\'#CCCCCC\';iTable.curRow=this;">';
		str							+= '<td class=td1 width=70 title='+propName+'>'+propName+'</td>';	

		var tempValue;
		
		switch(propName)
		{
			case 'class':
				tempValue	= curTag.className==''?'&nbsp;':curTag.className;
				break;
			case 'style':
				tempValue	= curTag.style.cssText==''?'&nbsp;':curTag.style.cssText;
				break;
			default:
				if(curTag.getAttribute(propName)==null)
				{
					tempValue	= '&nbsp;';
				}
				else if(typeof(curTag.getAttribute(propName))=='object')
				{
					tempValue	= '[object]'
				}
				else
				{
					tempValue	= curTag.getAttribute(propName);
				}
				break;
		}
		str							+= '<td class=td2 onclick="if(this.convertable!=false)convertTextToObj(this)" type='+valueType+' propname='+propName+' '+(valueType=='select'?('propvalue='+propValue):'')+'>'+tempValue+'&nbsp;</td>';
		str							+= '</tr>';
		return str;
	}

	function convertTextToObj(e)
	{
		_sync					= false;
		e.convertable			= false;
		var tempStr				= e.innerText.replace(/\s*$/,'');
		switch(e.type)
		{
			case 'text':
				e.innerHTML		= '<input type=text class=textfield onblur=convertObjToText(this) onkeydown="if(event.keyCode==13)convertObjToText(this)" value="'+tempStr+'">';
				e.firstChild.focus();
				e.firstChild.value=e.firstChild.value;
				//e.firstChild.select();
				break;
			case 'number':
				e.innerHTML		= '<input type=text class=textfield onblur=convertObjToText(this) onkeydown="if(event.keyCode==13)convertObjToText(this)" value="'+tempStr+'" onchange="if(this.value!=\'\' && isNaN(this.value))this.value=this.value.replace(/[^0-9]*/g,\'\')">';
				e.firstChild.focus();
				//e.firstChild.select();
				break;
			case 'color':
				e.innerHTML		= '<input type=text class=textfield onblur=convertObjToText(this) onkeydown="if(event.keyCode==13)convertObjToText(this)" value="'+tempStr+'">';
				e.firstChild.focus();
				//e.firstChild.select();
				break;
			case 'select':
				var tempOption	= '';

				for(var i=0;i<e.propvalue.split('|').length;i++)
				{
					tempOption	+= '<option'+(tempStr==e.propvalue.split('|')[i]?' selected':'')+' value='+e.propvalue.split('|')[i]+'>'+e.propvalue.split('|')[i]+'</option>';
				}

				e.innerHTML		= '<select onblur=convertObjToText(this) onchange=convertObjToText(this)>'+tempOption+'</select>';
				e.firstChild.focus();
				break;
			case 'boolean':
				var tempStr		= e.innerText;
				e.innerHTML		= '<select onblur=convertObjToText(this) onchange=convertObjToText(this)><option value=true '+(e.innerText=='true'?'selected':'')+'>true</option><option value=false '+(e.innerText=='false'?'selected':'')+'>false</option></select>';
				e.firstChild.focus();
				break;

		}
		_sync					= true;
	}


	function convertObjToText(e)
	{
		e.parentElement.convertable					= true;
		e.blur();
		if(e.value==e.defaultValue)
		{
			e.parentElement.innerText				= e.value==''?' ':e.value;
			return;
		}
		_sync										= false;
		e.value										= e.value.replace(/(^\s*)|(\s*$)/g,'');
		switch(e.parentElement.propname)
		{
			case 'style':
				curTag.style.cssText				= e.value==''?' ':e.value;
				break;
			case 'class':
				curTag.className					= e.value==''?' ':e.value;
				break;
			default:
				if(curTag)
				{
					if(e.parentElement.propname=='type' && curTag.tagName=='INPUT')
					{
						curTag.outerHTML					= curTag.outerHTML.replace(/(type=)(\S*)(\s|>)/gi,'$1'+e.value+' $3')
					}
					else
					{
						if(e.parentElement.propname=='width'||e.parentElement.propname=='height')
						{
							curTag.style[e.parentElement.propname]				= e.value==''?' ':e.value;
						}
						if(e.value=='')
						{
							curTag.removeAttribute(e.parentElement.propname);
						}
						else
						{
							try
							{
								curTag[e.parentElement.propname]					= e.value;
							}
							catch(e)
							{
							}
						}
					}
				}
				break;
		}
		
		e.parentElement.innerText					= e.value==''?' ':e.value;

//		_jEditor.editControl.focus();
//		var curRng									= _jEditor.editControl.DOM.selection.createRange();
//		curRng.moveToElementText(curTag);
//		curRng.select();
		createTagProperty(curTag);
		_sync										= true;
	}

	function scroll(e)
	{
		if(e==0)
		{
			event.srcElement.releaseCapture();
			clearInterval(scrollInterval);
		}
		else
		{
			event.srcElement.setCapture();
			scrollInterval		= setInterval('tagtree.scrollLeft+='+e,10);
		}
	}

</script>
</HEAD>

<BODY>
<TABLE width=100% border=0 cellspacing=0 cellpadding=0 style="border-bottom:1px solid #CCCCCC">
<TR>
	<TD id=tag nowrap width=136>&lt; no tag &gt;</TD>
	<TD align=right width=24 onmousedown="event.cancelBubble=true;"><img src="images/closepanel.gif" onclick="kill()" hspace=3></TD>
</TR>
<TR>
	<TD style="position:relative;height:12;"><div id=tagtree nowrap onmousedown="event.cancelBubble=true;"></div></TD>
	<TD onmousedown="event.cancelBubble=true;"><img src="images/arrow_left.gif" hspace=2 width=5 height=5 onmousedown="scroll(-2)" onmouseup="scroll(0)"><img src="images/arrow_right.gif" width=5 height=5 onmousedown="scroll(2)" onmouseup="scroll(0)"></TD>
</TR>
</TABLE>
<div id=box style="height:200;overflow:auto" onmousedown="event.cancelBubble=true;">
</div>
</BODY>
</HTML>
